<template>
  <div class="app-container">
    <el-tabs type="border-card" @tab-click="handleClick">
      <el-tab-pane label="待审核">
        <!-- 表格 -->
        <el-table
          :key="tableKey"
          ref="table"
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column align="center" label="拍品名称">
            <template slot-scope="{ row }">
              <el-image
                style="width: 40px; height: 40px; text-align: center"
                :src="$store.state.settings.imgHost + row.image"
                :preview-src-list="[$store.state.settings.imgHost + row.image]"
              />
              <span style="margin-left: 10px; vertical-align: top">{{
                row.name
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="价格" prop="price" />
          <el-table-column align="center" label="创建时间" prop="created_at" />
          <el-table-column
            align="center"
            label="店铺"
            prop="shopping.shopping_name"
          />
          <el-table-column align="center" label="操作">
            <template slot-scope="{ row }">
              <el-button
                size="mini"
                plain
                type="primary"
                @click="onhandleSubmit(row)"
              >
                审核通过
              </el-button>
              <el-button
                size="mini"
                plain
                type="danger"
                @click="handleRefuse(row.id)"
              >
                拒绝
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已拒绝">
        <!-- 表格 -->
        <el-table
          :key="tableKey"
          ref="table"
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column align="center" label="拍品名称">
            <template slot-scope="{ row }">
              <el-image
                style="width: 40px; height: 40px; text-align: center"
                :src="$store.state.settings.imgHost + row.image"
                :preview-src-list="[$store.state.settings.imgHost + row.image]"
              />
              <span style="margin-left: 10px; vertical-align: top">{{
                row.name
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="价格" prop="price" />
          <el-table-column align="center" label="创建时间" prop="created_at" />
          <el-table-column
            align="center"
            label="店铺"
            prop="shopping.shopping_name"
          />
          <el-table-column
            align="center"
            label="拒绝原因"
            prop="reject_remark"
          />
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 分页 -->
    <div v-if="total > 0" style="text-align: right">
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.per_page"
        @pagination="getList"
      />
    </div>

    <!-- 审核通过 -->
    <el-dialog
      title="审核"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="40%"
    >
      <el-form
        ref="postForm1"
        :model="form1"
        :rules="rules"
        class="form-container"
      >
        <div class="createPost-main-container">
          <el-form-item label-width="90px" label="排序:">
            <el-input
              v-model="form1.order"
              disabled
              class="input-spin"
              type="number"
            />
          </el-form-item>
          <el-form-item label-width="90px" label="拍品名称:" prop="name">
            <el-input v-model.trim="form1.name" disabled />
          </el-form-item>
          <el-form-item
            label-width="90px"
            label="拍品分类:"
            prop="product_category_id"
          >
            <el-select
              v-model="form1.product_category_id"
              placeholder="请选择拍品分类"
              clearable
              disabled
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in classifyOptions"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label-width="90px" label="起拍价:" prop="price">
            <el-input v-model="form1.price" class="input-spin" type="number" />
          </el-form-item>
          <el-form-item
            label-width="90px"
            label="加价幅度:"
            prop="add_money_range"
          >
            <el-input
              v-model="form1.add_money_range"
              class="input-spin"
              type="number"
            />
          </el-form-item>
          <el-form-item label-width="90px" label="估价:" prop="evaluation">
            <el-row>
              <el-col :span="11">
                <el-input
                  v-model="form1.min_money"
                  class="input-spin"
                  type="number"
                />
              </el-col>
              <el-col :span="2" style="text-align: center;">
                -
              </el-col>
              <el-col :span="11">
                <el-input
                  v-model="form1.max_money"
                  class="input-spin"
                  type="number"
                />
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item
            label-width="90px"
            label="拍卖场次:"
            prop="auction_session_id"
          >
            <el-select
              v-model="form1.auction_session_id"
              placeholder="请选择拍卖场次"
              clearable
              style="width: 100%;"
            >
              <el-option
                v-for="(item, index) in fieldOptions"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item
            label-width="90px"
            label="竞拍保证金:"
            prop="security_deposit"
          >
            <el-input
              v-model="form1.security_deposit"
              class="input-spin"
              disabled
              type="number"
            /><span style="color: #aaa">填“0”则不需要竞拍保证金</span>
          </el-form-item>
          <el-form-item label="拍品主图:" prop="image">
            <img
              style="
                width: 148px;
                height: 148px;
                display: inline-block;
                margin-right: 8px;
                margin-bottom: 8px;
              "
              :src="form1.image"
            >
          </el-form-item>
          <!-- <el-form-item label-width="90px" label="拍品图片:" prop="image_url">
            <el-upload
              :file-list="fileList"
              action="#"
              accept=".jpg,.jpeg,.png,.JPG,.JPEG"
              list-type="picture-card"
              :http-request="
                file => {
                  return uploadImgHandle(file);
                }
              "
              :on-remove="
                (file, fileList) => {
                  return removeHandle(file, fileList);
                }
              "
            >
              <i class="el-icon-plus" />
            </el-upload>
          </el-form-item> -->
          <el-form-item label="拍品图片:" prop="image">
            <img
              v-for="(item, index) in fileList"
              :key="index"
              style="
                width: 148px;
                height: 148px;
                display: inline-block;
                margin-right: 8px;
                margin-bottom: 8px;
              "
              :src="item.url"
            >
          </el-form-item>
          <!-- <el-form-item label-width="90px" label="拍品参数:">
            <el-row>
              <el-col
                v-for="(item, index) in form1._params"
                :key="index"
                :span="12"
              >
                <el-input
                  v-model="item.value"
                  :placeholder="item.model"
                  :style="index > 1 ? 'margin-top: 10px;' : ''"
                />
              </el-col>
            </el-row>
          </el-form-item> -->
          <el-form-item label="拍品参数:">
            <el-row>
              <el-col
                v-for="(item, index) in form1._params"
                :key="index"
                :span="12"
              >
                <!-- <el-input
                    v-model="item.value"
                    disabled
                    :placeholder="item.model"
                    :style="index > 1 ? 'margin-top: 10px;' : ''"
                  /> -->
                {{ item.model }}：{{ item.value }}
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label-width="90px" label="拍品详情:">
            <div v-html="form1.content" />
          </el-form-item>
          <el-form-item label-width="90px" label="店铺:">
            <el-input v-model.trim="form1.shopping_name" disabled />
          </el-form-item>
          <el-form-item label-width="90px" label="保证金:">
            <el-input v-model.trim="form1.shopping_security_deposit" disabled />
          </el-form-item>
          <el-form-item label-width="90px" label="创建时间:">
            <el-date-picker
              v-model="form1.created_at"
              disabled
              type="datetime"
              placeholder="选择创建时间"
              :clearable="false"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label-width="90px" label="会员:">
            <el-input v-model.trim="form1.user_info" disabled />
          </el-form-item>
        </div>
      </el-form>
      <!-- <div style="text-align: center;">
        <el-radio-group v-model="radioValue">
          <el-radio-button label="基础信息"></el-radio-button>
          <el-radio-button label="商品详情"></el-radio-button>
        </el-radio-group>
      </div>
      <div v-show="radioValue == '基础信息'" style="margin-top: 20px;">
        <el-form ref="postForm" :model="form" class="form-container">
          <div class="createPost-main-container">
            <el-form-item label-width="90px" label="拍品名称:">
              <el-input v-model.trim="form.name" disabled />
            </el-form-item>
            <el-form-item label-width="90px" label="拍品分类:">
              <el-select v-model="form.product_category_id" disabled placeholder="请选择拍品分类" clearable style="width: 100%;">
                <el-option v-for="(item, index) in classifyOptions" :key="index" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label-width="90px" label="起拍价:">
              <el-input v-model="form.min_money" class="input-spin" disabled type="number" />
            </el-form-item>
            <el-form-item label-width="90px" label="拍品图片:">
              <el-row>
                <el-col :span="8" v-for="(item, index) in form.image_list" :key="index">
                  <el-image style="width: 100px; height: 100px" :src="$store.state.settings.imgHost+item" :preview-src-list="form.image_list">
                  </el-image>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label-width="90px" label="拍品参数:">
              <el-row>
                <el-col :span="12" v-for="(item, index) in form._params" :key="index">
                  <el-input v-model.trim="item.value" :placeholder="item.model" disabled :style="index > 1 ? 'margin-top: 10px;' : ''" />
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label-width="90px" label="排序:">
              <el-input v-model="form.order" class="input-spin" type="number" />
            </el-form-item>
            <el-form-item label-width="90px" label="店铺:">
              <el-input v-model.trim="form.shopping_name" disabled />
            </el-form-item>
            <el-form-item label-width="90px" label="创建时间:">
              <el-date-picker v-model="form.created_at" type="datetime" disabled placeholder="选择创建时间" :clearable="false" style="width: 100%;" />
            </el-form-item>
            <el-form-item label-width="90px" label="会员:">
              <el-input v-model.trim="form.user_info" disabled />
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div v-show="radioValue == '商品详情'" style="margin-top: 20px;">
        <Tinymce ref="editor" :readonly="1" v-model="form.content" :height="400" />
      </div> -->
      <div style="margin-top: 40px; text-align: center">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button
          type="danger"
          @click="handleSubmit(form1.id)"
        >审核通过</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAuctionGoodList,
  getField,
  getClassify,
  updateAuctionGood,
  uploadFile
} from '@/api/common'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
// import Tinymce from '@/components/Tinymce'

export default {
  name: 'AuctionGoodExamine',
  components: {
    Pagination
    // Tinymce
  },
  directives: {
    waves
  },
  data() {
    const validEvaluation = (value, callback, $msgForm, $userMsgForm) => {
      if (!$msgForm.min_money || !$msgForm.max_money) {
        callback(new Error('请输入估价'))
      } else if ($msgForm.min_money < 0) {
        callback(new Error('估价最小值不能小于0'))
      } else if ($msgForm.max_money <= 0) {
        callback(new Error('估价最大值必须大于0'))
      } else {
        callback()
      }
    }
    return {
      tableKey: 0,
      list: null,
      total: 0,
      radioValue: '基础信息',
      listLoading: true,
      dialogVisible: false,
      classifyOptions: undefined,
      fieldOptions: undefined,
      fileList: [],
      form1: {},
      listQuery: {
        page: 1,
        per_page: 20,
        source: 2,
        audit_status: 2,
        status: 0
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入拍品名称',
            trigger: 'blur'
          }
        ],
        product_category_id: [
          {
            required: true,
            message: '请选择拍品分类',
            trigger: 'change'
          }
        ],
        price: [
          {
            required: true,
            message: '请输入起拍价',
            trigger: 'blur'
          }
        ],
        add_money_range: [
          {
            required: true,
            message: '请输入加价幅度',
            trigger: 'blur'
          }
        ],
        evaluation: [
          {
            required: true,
            trigger: 'blur',
            validator: (rule, value, callback) => {
              validEvaluation(value, callback, this.form1, this.$refs.dataForm)
            }
          }
        ],
        auction_session_id: [
          {
            required: true,
            message: '请选择拍卖场次',
            trigger: 'change'
          }
        ],
        security_deposit: [
          {
            required: true,
            message: '请输入竞拍保证金',
            trigger: 'blur'
          }
        ],
        image_url: [
          {
            required: true,
            message: '请上传拍品图片',
            trigger: 'change'
          }
        ]
      }
    }
  },
  created() {
    this.getList()
    this.getClassifyData()
    this.getFieldData()
  },
  methods: {
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    clearFilter() {
      this.handleFilter()
    },
    getFieldData() {
      getField({
        per_page: 100
      }).then((res) => {
        this.fieldOptions = res.data.data
      })
    },
    handleClick(tab) {
      this.listQuery.audit_status = tab.index == 0 ? 2 : 0
      this.handleFilter()
    },
    removeHandle() {
      this.form1.image_url = undefined
      this.fileList = []
    },
    uploadImgHandle(e) {
      const formData = new FormData()
      formData.append('file', e.file)
      uploadFile(formData).then((res) => {
        const image = res.data
        this.fileList.push({
          url: this.$store.state.settings.imgHost + image
        })
        this.$set(
          this.form1,
          'image_url',
          this.$store.state.settings.imgHost + image
        )
      })
    },
    onhandleSubmit(row, type = 1) {
      this.fileList = []
      this['form' + type].image_url = undefined
      this['form' + type] = Object.assign({}, row)
      this['form' + type]['id'] = row.id
      this['form' + type]['shopping_security_deposit'] =
        this['form' + type].shopping &&
        this['form' + type].shopping.security_deposit
          ? this['form' + type].shopping.security_deposit
          : ''
      this['form' + type]['shopping_name'] =
        this['form' + type].shopping &&
        this['form' + type].shopping.shopping_name
          ? this['form' + type].shopping.shopping_name
          : ''
      if (row.image_list && row.image_list != 'null') {
        this.fileList = []
        this['form' + type]['image_list'] = JSON.parse(
          this['form' + type]['image_list']
        )
        if (this['form' + type]['image_list'].length > 0) {
          this['form' + type]['image_list'].forEach((res) => {
            res = this.$store.state.settings.imgHost + res
            this.fileList.push({
              url: res
            })
          })
          this['form' + type].image_url = 1
        }
      } else {
        this['form' + type]['image_list'] = []
      }
      if (this['form' + type].params && this['form' + type].params != 'null') {
        this['form' + type]['params'] = JSON.parse(this['form' + type].params)
        if (this['form' + type].params.length > 0) {
          const array = []
          this['form' + type].params.forEach((res) => {
            for (const i in res) {
              array.push({
                model: i,
                value: res[i]
              })
            }
          })
          this.$set(this['form' + type], '_params', array)
        }
      }
      if (
        this['form' + type].user &&
        this['form' + type].user.name &&
        this['form' + type].user.user
      ) {
        this['form' + type]['user_info'] =
          this['form' + type].user.name +
          '(' +
          this['form' + type].user.user +
          ')'
      }
      this.dialogVisible = true
    },
    handleSubmit(id) {
      // this.$refs["postForm1"].validate((valid) => {
      //   if (valid) {
      // let params = {
      //   name: this.form1.name,
      //   product_category_id: this.form1.product_category_id.toString(),
      //   min_money: this.form1.min_money.toString(),
      //   max_money: this.form1.max_money.toString(),
      //   image_list: this.fileList.map((res) => { return res.url }),
      //   order: this.form1.order.toString(),
      //   created_at: this.form1.created_at,
      //   add_money_range: this.form1.add_money_range,
      //   auction_session_id: this.form1.auction_session_id,
      //   security_deposit: this.form1.security_deposit,
      //   price: this.form1.price
      // }
      // if (this.form1._params && this.form1._params.length > 0) {
      //   let array = [];
      //   this.form1._params.forEach((res) => {
      //     array.push({
      //       [res.model]: res.value
      //     })
      //   })
      //   params["params"] = JSON.stringify(array)
      // }
      //   上传审核-待审核-审核通过传参status=1audit_status=3
      const params = {}
      params['status'] = '1'
      params['audit_status'] = '3'
      this.$confirm('请确认是否通过审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.listLoading = true
          updateAuctionGood(id, params)
            .then(() => {
              this.$notify({
                title: '提示',
                message: '操作成功',
                type: 'success',
                duration: 2000
              })
              // this.dialogVisible = false
              this.getList()
            })
            .catch(() => {
              this.listLoading = false
            })
        })
        .catch(() => {})
      //     }else{
      //     this.$message.warning("还有必填项未填写")
      //   }
      //   })
    },
    // handleDialog(row) {
    // this.fileList = []
    // this.form.image_url = undefined
    //   this.form1 = Object.assign({}, row);
    //   if (row.image_list && row.image_list != "null") {
    //     this.form1["image_list"] = JSON.parse(this.form1["image_list"])
    //     if (this.form1["image_list"].length > 0) {
    //       this.form1["image_list"].forEach(res => {
    //         res = this.$store.state.settings.imgHost + res;
    // this.fileList.push({url: res})
    //       });
    // this.form.image_url = 1
    //     }
    //   } else {
    //     this.form1["image_list"] = []
    //   }
    //   if (this.form1.shopping) {
    //     this.form1["shopping_name"] = this.form1.shopping.shopping_name;
    //   }
    //   if (this.form1.user && this.form1.user.name && this.form1.user.user) {
    //     this.form1["user_info"] = this.form1.user.name + "(" + this.form1.user.user + ")"
    //   }
    //   if (this.form1.params && this.form1.params != "null") {
    //     this.form1["params"] = JSON.parse(this.form1.params);
    //     if (this.form1._params && this.form1.params.length > 0) {
    //       this.form1["_params"] = [];
    //       this.form1.params.forEach((res) => {
    //         for (let i in res) {
    //           this.form1["_params"].push({
    //             model: i,
    //             value: res[i]
    //           })
    //         }
    //       })
    //     }
    //   }
    //   this.dialogVisible = true
    // },
    // 拒绝
    handleRefuse(id) {
      const that = this
      this.$prompt('', '拒绝', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputPlaceholder: '请输入拒绝原因',
        inputErrorMessage: '拒绝原因不能为空',
        inputType: 'textarea',
        closeOnPressEscape: false,
        closeOnClickModal: false,
        closeOnHashChange: false,
        callback() {},
        beforeClose(action, instance, done) {
          if (action == 'confirm') {
            if (instance.confirmButtonLoading) {
              return false
            }
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '操作中...'
            updateAuctionGood(id, {
              reject_remark: instance.inputValue,
              audit_status: '0'
            })
              .then(() => {
                that.getList()
                that.$notify({
                  title: '提示',
                  message: '操作成功',
                  type: 'success',
                  duration: 2000
                })
                done()
              })
              .finally(() => {
                instance.confirmButtonLoading = false
                instance.confirmButtonText = '确定'
              })
          } else {
            if (!instance.confirmButtonLoading) {
              done()
            } else {
              that.$message.warning('操作中，禁止关闭')
            }
          }
        }
      })
    },
    getClassifyData() {
      getClassify().then((res) => {
        this.classifyOptions = res.data
      })
    },
    getList() {
      this.dialogVisible = false
      this.listLoading = true
      getAuctionGoodList(this.listQuery)
        .then((response) => {
          const { data, total } = response.data
          this.list = data
          this.total = total
        })
        .finally(() => {
          this.listLoading = false
        })
    }
  }
}
</script>

<style>
.el-upload-list__item.is-ready,
.el-upload-list__item.is-uploading {
  display: none !important;
}

.hide .el-upload--picture-card {
  display: none;
}

.el-upload-list__item {
  transition: none !important;
}
</style>
